<nz-spin [nzSpinning]="loading"></nz-spin>
<nz-card >
  <nz-tabset [nzTabBarExtraContent]="extraTemplete" (nzSelectChange)="changeTabs($event)">
    <nz-tab nzTitle="{{'all'| translate}}"></nz-tab>
    <nz-tab nzTitle="{{'on_sale'| translate}}"></nz-tab>
    <nz-tab nzTitle="{{'off_sale'| translate}}"></nz-tab>
  </nz-tabset>
  <ng-template #extraTemplete>

    <button nz-button nzType="primary" (click)="managePopItem()"><i class="anticon anticon-setting"></i>{{'manage-single-pop'| translate}}</button>
    <button nz-button  style="margin-left: 10px;" nzType="primary" (click)="createPop()"><i class="anticon anticon-plus-circle-o"></i>{{'add-pop-combo'| translate}}</button>
    <!--<nz-dropdown>-->
      <!--<button nzType="primary" nz-button nz-dropdown style="margin-left: 10px"><span>添加POP套餐</span> <i class="anticon anticon-down"></i></button>-->
      <!--<ul nz-menu>-->
        <!--<li nz-menu-item>-->
          <!--<a (click)="manuallyAdd()"><i class="anticon anticon-plus"></i>手动添加套餐</a>-->
        <!--</li>-->
        <!--<li nz-menu-item>-->
          <!--<a (click)="createPop()"><i class="anticon anticon-plus"></i>选择添加套餐(开发中)</a>-->
        <!--</li>-->
      <!--</ul>-->
    <!--</nz-dropdown>-->


  </ng-template>

  <form nz-form [nzLayout]="'inline'" class="search__form">
    <nz-row [nzGutter]="8">
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <input type="text" nz-input placeholder="{{'input_sap'| translate}}" [(ngModel)]="q.sap" name="sap">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <input type="text" nz-input placeholder="{{'input_sku'| translate}}" [(ngModel)]="q.sku" name="sku">
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="4" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-select nzPlaceHolder="{{'all_brands'| translate}}" nzAllowClear [(ngModel)]="q.brand" name="brand">
              <nz-option [nzLabel]="brand.text" [nzValue]="brand.value" *ngFor="let brand of brands"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </nz-col>
      <nz-col nzMd="3" nzSm="24">
        <button nz-button type="button" [nzLoading]="http.loading" [nzType]="'primary'" class="mx-sm" (click)="st.load(1, q)">{{'search' | translate}}</button>
      </nz-col>
    </nz-row>
  </form>
</nz-card>

<div class="d-flex align-items-center" style="margin-bottom: 8px">
  <div>
    <button nz-button nzType='default' style="margin-right: 8px" (click)="exportPop()"><i class="anticon anticon-export"></i>{{'batch-export-pop'| translate}}</button>
    <button nz-button nzType='default' style="margin-right: 8px" (click)="showUpConfirm()"><i class="anticon anticon-up-circle-o"></i>{{'batch_on_sale'| translate}}</button>
    <button nz-button nzType='default' style="margin-right: 8px" (click)="showDownConfirm()"><i class="anticon anticon-down-circle-o"></i>{{'batch_off_sale'| translate}}</button>
  </div>
</div>

<simple-table #st
              [data]="list"
              [extraParams]="q"
              [resReName]="{ total: 'data.total', list: 'data.rows'}"
              [reqReName]="{pi:'pageNumber', ps: 'pageSize'}"
              [columns]="columns"
              [showTotal]="true"
              [showPagination]="true"
              [showSizeChanger]="true"
              (checkboxChange)="checkboxChange($event)">
  <!--<ng-template st-row="brand" let-item let-index="index">-->
    <!--{{item.brand | brandEnPipe | uppercase}}-->
  <!--</ng-template>-->
  <ng-template st-row="img" let-i>
    <span *ngIf="!i.img" style="color: lightgrey; font-size: 12px;">{{'no_image' | translate}}</span>
    <a><img *ngIf="i.img" (click)="showImage(imgSuffix + i.img)" [src]="imgSuffix + i.img" width="32px" style=" max-height: 32px;"/></a>
  </ng-template>
  <ng-template st-row="priceUnit" let-i let-index="index">
    <nz-tag [nzColor]="i.priceUnit === 'USD' ? 'green' : i.priceUnit === 'EUR' ? 'red': 'purple'">{{(i.priceUnit != '') ? i.priceUnit : 'NO' | uppercase}}</nz-tag>

  </ng-template>
  <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
    <ng-template #modalContent>
      <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
    </ng-template>
  </nz-modal>
</simple-table>


<nz-drawer id="drawer" [nzVisible]="visible" [nzWidth]="640" [nzClosable]="false" (nzOnClose)="close()">
  <p class="title" style=" margin-bottom: 24px;">
    <nz-tag [nzColor]="'magenta'" >SAP:</nz-tag>
    {{popDto.sap}}<br>
  <p class="title" style=" margin-bottom: 24px;">
    <nz-tag [nzColor]="'magenta'" >SKU:</nz-tag>
    {{popDto.sku}}<br>
    <!--<nz-tag [nzColor]="'gold'" *ngIf="popDto.isCm === '1'">Rx</nz-tag>-->
    <!--<nz-tag [nzColor]="'blue'">{{popDto.brandLine}}</nz-tag>-->
    <!--<nz-tag *ngIf="popDto.eanCode" [nzColor]="'purple'">{{popDto.eanCode}}</nz-tag>-->
  </p>
  <nz-divider nzText="Basic Info" nzOrientation="left" ></nz-divider>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">{{'description' | translate}}:</p> {{popDto.description}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">{{'brand' | translate}}:</p> {{popDto.brand}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Qty:</p> {{popDto.qty}}
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">Exw:</p> {{popDto.priceUnit == 'USD'?'$':'€'}}{{popDto.exw}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">CIF:</p>  {{popDto.priceUnit == 'USD'?'$':'€'}}{{popDto.cif}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">{{'price_unit' | translate}}:</p> <span nz-tooltip><nz-tag [nzColor]="popDto.priceUnit === 'USD' ? 'green' : popDto.priceUnit === 'EUR' ? 'red': 'purple'">{{popDto.priceUnit != '' ? popDto.priceUnit : 'NO' | uppercase}}</nz-tag></span>
      </div>
    </div>
  </div>
  <div nz-row>
    <!--<div nz-col nzSpan="8">-->
      <!--<div class="item-wrap">-->
        <!--<p class="label">Unit:</p>{{popDto.unit}}-->
      <!--</div>-->
    <!--</div>-->
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">{{'gross_weight' | translate}}:</p>{{popDto.grossWeight}} kg
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">{{'net_weight' | translate}}:</p>{{popDto.netWeight}} kg
      </div>
    </div>
  </div>
  <div nz-row>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">{{'ctn_qty' | translate}}:</p> {{popDto.ctnQty}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">{{'cm_size' | translate}}:</p> {{popDto.cm}}
      </div>
    </div>
    <div nz-col nzSpan="8">
      <div class="item-wrap">
        <p class="label">{{'is_on_sale' | translate}}:</p>
        <nz-tag [nzColor]="'#87d068'" *ngIf="popDto.status === 'normal'">上架</nz-tag>
        <nz-tag [nzColor]="'red '" *ngIf="popDto.status === 'disabled'">下架</nz-tag>
      </div>
    </div>
  </div>
  <nz-divider nzText="POP Detail" nzOrientation="left"></nz-divider>

  <nz-collapse [nzBordered]="false">
    <nz-collapse-panel *ngFor="let panel of panels;" [nzHeader]="panel.name" [nzActive]="panel.active"
                       [ngStyle]="panel.customStyle">
      <div nz-row>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">SAP : </p> {{panel.detail.sap}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">SKU : </p> {{panel.detail.sap}}
          </div>
        </div>
        <!--<div nz-col nzSpan="8">-->
          <!--<div class="item-wrap">-->
            <!--<p class="label">Sap Description : </p> {{panel.detail.sapDesc}}-->
          <!--</div>-->
        <!--</div>-->
      </div>
      <div nz-row>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <strong><p class="label">数量 : </p> {{panel.detail.count}}</strong>
          </div>
        </div>
        <!--<div nz-col nzSpan="8">-->
          <!--<div class="item-wrap">-->
            <!--<p class="label">Description : </p> {{panel.detail.description}}-->
          <!--</div>-->
        <!--</div>-->
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">{{'material' | translate}} : </p> {{panel.detail.material}}
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">EXW : </p> {{panel.detail.priceUnit == 'USD'?'$':'€'}}{{panel.detail.exw}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">CIF : </p> {{panel.detail.priceUnit == 'USD'?'$':'€'}}{{panel.detail.cif}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">{{'price_unit' | translate}} : </p> {{panel.detail.priceUnit}}
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">Qty : </p> {{panel.detail.qty}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">{{'ctn_qty' | translate}} : </p> {{panel.detail.ctnQty}}
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">{{'material' | translate}} : </p> {{panel.detail.material}}
          </div>
        </div>
      </div>
      <div nz-row>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">{{'gross_weight' | translate}} : </p> {{panel.detail.grossWeight}} KG
          </div>
        </div>
        <div nz-col nzSpan="8">
          <div class="item-wrap">
            <p class="label">{{'net_weight' | translate}} : </p> {{panel.detail.netWeight}} KG
          </div>
        </div>
      </div>
    </nz-collapse-panel>
  </nz-collapse>
</nz-drawer>
